<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <fieldset style="width:800px;margin:0 auto;">
        <legend>用户注册</legend>
        <form action="2.success.html" id="registry">
            <p>
                <label for="">邮政编码：</label>
                <input type="text">
                <span></span>
            </p>
            <p>
                <label for="">手机号码：</label>
                <input type="text">
                <span></span>
            </p>
            <p>
                <label for="">身份号码：</label>
                <input type="text">
                <span></span>
            </p>
            <p>
                <label for="">用户密码：</label>
                <input type="text">
                <span></span>
            </p>
            <p><input type="submit" value="提交注册"></p>
        </form>
    </fieldset>
    <script>
        var aInput = document.querySelectorAll('input');//多个input
        var aSpan = document.querySelectorAll('span');//多个span
        var oForm = document.querySelector('#registry');//form表单
        //给每一个文本框设定一个标记，证明这个文本框是通过检测的。(不能使用一个标记)
        var flag1 = true;
        var flag2 = true;
        var flag3 = true;
        var flag4 = true;
        //1.邮政编码
        aInput[0].focus();//第一个文本框得到焦点。
        aSpan[0].innerHTML = '请输入6位数字编码，第一位不能为0';
        aSpan[0].style.color = '#999';

        aInput[0].onfocus = function () {
            aSpan[0].innerHTML = '请输入6位数字编码，第一位不能为0';
            aSpan[0].style.color = '#999';
        }
        aInput[0].onblur = function () {
            var reg = /^[1-9]\d{5}$/;
            if (this.value !== '') {
                if (reg.test(this.value)) {
                    aSpan[0].innerHTML = '√';
                    aSpan[0].style.color = 'green';
                    flag1 = true;
                } else {
                    aSpan[0].innerHTML = '邮政编码格式有误';
                    aSpan[0].style.color = 'red';
                    flag1 = false;
                }
            } else {
                aSpan[0].innerHTML = '邮政编码不能为空';
                aSpan[0].style.color = 'red';
                flag1 = false;
            }
        }

        //2.手机号码：
        aInput[1].onfocus = function () {
            aSpan[1].innerHTML = '请输入11位手机号码';
            aSpan[1].style.color = '#999';
        }
        aInput[1].onblur = function () {
            var reg = /^1[3578]\d{9}$/;
            if (this.value !== '') {
                if (reg.test(this.value)) {
                    aSpan[1].innerHTML = '√';
                    aSpan[1].style.color = 'green';
                    flag2 = true;
                } else {
                    aSpan[1].innerHTML = '手机格式有误';
                    aSpan[1].style.color = 'red';
                    flag2 = false;
                }
            } else {
                aSpan[1].innerHTML = '手机不能为空';
                aSpan[1].style.color = 'red';
                flag2 = false;
            }
        }

        //3.身份证验证
        //验证身份证号15："\d{14}[[0-9],0-9xX]", 18位："\d{17}(\d|X|x)"
        aInput[2].onfocus = function () {
            aSpan[2].innerHTML = '请输入18位的身份证号码';
            aSpan[2].style.color = '#999';
        }

        aInput[2].onblur = function () {
            var reg = /^\d{6}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|x|X)$/;
            if (this.value !== '') {
                if (reg.test(this.value)) {
                    aSpan[2].innerHTML = '√';
                    aSpan[2].style.color = 'green';
                    flag3 = true;
                } else {
                    aSpan[2].innerHTML = '身份证格式有误';
                    aSpan[2].style.color = 'red';
                    flag3 = false;
                }
            } else {
                aSpan[2].innerHTML = '身份证号码不能为空';
                aSpan[2].style.color = 'red';
                flag3 = false;
            }
        }

        //4.密码(数字，大小写字母，特殊字符)
        aInput[3].onfocus = function () {
            aSpan[3].innerHTML = '请输入一个6-12位的密码，必须两种字符组成';
            aSpan[3].style.color = '#999';
        }
        //onkeydown--按下键盘按键触发
        aInput[3].oninput = function () {
            if (this.value.length >= 6 && this.value.length <= 12) {
                //满足长度进行密码类型检测
                //一种字符   弱
                //二种字符或者三种字符  中
                //四种字符 强
                var regnum = /[0-9]+/g;  //数字
                var reguppercase = /[A-Z]+/g;//大写
                var reglowercase = /[a-z]+/g;//小写
                var other = /[\W_]+/g;//特殊字符  //\W:非数字字母下划线
                var count = 0;//进行统计种类。
                if (regnum.test(this.value)) {//满足条件输入值一定存在数字
                    count++;
                }
                if (reguppercase.test(this.value)) {//满足条件输入值一定存在大写
                    count++;
                }
                if (reglowercase.test(this.value)) {//满足条件输入值一定存在小写
                    count++;
                }
                if (other.test(this.value)) {//满足条件输入值一定存在特殊字符
                    count++;
                }
                //通过count的值判断有几种数据类型
                switch (count) {
                    case 1:
                        aSpan[3].innerHTML = '弱';
                        aSpan[3].style.color = 'red';
                        flag4 = false;
                        break;
                    case 2:
                    case 3:
                        aSpan[3].innerHTML = '中';
                        aSpan[3].style.color = 'orange';
                        flag4 = true;
                        break;
                    case 4:
                        aSpan[3].innerHTML = '强';
                        aSpan[3].style.color = 'green';
                        flag4 = true;
                        break;
                }
            } else {
                aSpan[3].innerHTML = '密码长度有误';
                aSpan[3].style.color = 'red';
                flag4 = false;
            }
        }
        aInput[3].onblur = function () {
            if (this.value !== '') {
                if (flag4) {
                    aSpan[3].innerHTML = '√';
                    aSpan[3].style.color = 'green';
                    flag4 = true;
                } else {
                    aSpan[3].innerHTML = '密码格式有误';
                    aSpan[3].style.color = 'red';
                    flag4 = false;
                }
            } else {
                aSpan[3].innerHTML = '密码不能为空';
                aSpan[3].style.color = 'red';
                flag4 = false;
            }
        }
        //提交表单--form+submit提交
        oForm.onsubmit = function () {
            if (aInput[0].value === '') {
                aSpan[0].innerHTML = '邮政编码不能为空';
                aSpan[0].style.color = 'red';
                flag1 = false;
            }
            if (aInput[1].value === '') {
                aSpan[1].innerHTML = '手机号码不能为空';
                aSpan[1].style.color = 'red';
                flag2 = false;
            }
            if (aInput[2].value === '') {
                aSpan[2].innerHTML = '身份证号码不能为空';
                aSpan[2].style.color = 'red';
                flag3 = false;
            }
            if (aInput[3].value === '') {
                aSpan[3].innerHTML = '密码不能为空';
                aSpan[3].style.color = 'red';
                flag4 = false;
            }
            //什么情况阻止跳转，如果有标记为false的时候。条件满足，立刻阻止。
            if (!flag1 || !flag2 || !flag3 || !flag4) {
                return false;//阻止跳转
            }

        }
    </script>
</body>

</html>